<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>超市账单管理系统</title>
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/style.css" />
		<!-- 生产环境版本，优化了尺寸和速度 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>

		<div id="app">
			<!--头部-->
			<header class="publicHeader">
				<h1>超市账单管理系统</h1>

				<div class="publicHeaderR">
					<p><span>下午好！</span><span style="color: #fff21b"> {{loginUser.name}}</span> , 欢迎你！</p>
					<a href="javascript:void(0)" @click="logout()">退出</a>
				</div>
			</header>
			<!--时间-->
			<section class="publicTime">
				<span id="time">2015年1月1日 11:11 星期一</span>
				<a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
			</section>
			<!--主体内容-->
			<section class="publicMian">
				<div class="left">
					<h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
					<nav>
						<ul class="list">
							<li><a href="billList.html">账单管理</a></li>
							<li><a href="providerList.html">供应商管理</a></li>
							<li><a href="userList.html">用户管理</a></li>
							<li><a href="password.html">密码修改</a></li>
							<li><a href="javascript:void(0)" @click="logout()">退出系统</a></li>
						</ul>
					</nav>
				</div>

				<div class="right">
					<div class="location">
						<strong>你现在所在的位置是:</strong>
						<span>用户管理页面 >> 用户信息查看页面</span>
					</div>
					<div class="providerView">
						<p><strong>用户编号：</strong><span>{{show.account}}</span></p>
						<p><strong>用户名称：</strong><span>{{show.name}}</span></p>
						<p><strong>用户性别：</strong><span>{{show.sex == 0?'男':'女'}}</span></p>
						<p><strong>用户年龄：</strong><span>{{show.age}}岁</span></p>
						<p><strong>用户电话：</strong><span>{{show.phone}}</span></p>
						<p><strong>用户类别：</strong><span>{{show.type=0?"管理员":show.type==1?"经理":"员工"}}</span></p>

						<a href="userList.html">返回</a>
					</div>
				</div>
			</section>
			<footer class="footer">
			</footer>
	</div>
	<script>
		
		var vue = new Vue({
			el:"#app",
			data:{
				//存放登录的user
				loginUser:{},
				//存放的就是要展示的user对象
				show:{}
			},
			methods:{
				logout:function(){
					//1.提示确认框
					//2.确认 清空session中数据
					//3.跳转到登录页面
					if(confirm("确定要退出登录?")){
						sessionStorage.clear();
						location.href = "login.html";
					}
				
				}
			},
			mounted:function(){
				//vue初始化完毕会主动触发
				var userStr = sessionStorage.getItem("user");
				var userObj = JSON.parse(userStr);
				
				this.loginUser = userObj;
				
				//读取要展示的user
				var showStr = sessionStorage.getItem("show");
				var showObj = JSON.parse(showStr);
				
				this.show = showObj;
			}
		});
		
	</script>
	</body>
</html>
